<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>

<%--此页面为员工的显示页面的相关代码
    boostrap前端框架，需要导入相关的文件（jquery,css样式，javascript插件）
    学会运用ajax发送请求与json发送与接收数据，前端函数绑定事件
    利用分页插件进行分页
    每次跳转页面回显时，返回到原页面应当清空原来的内容进行刷新
--%>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>员工列表</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <%--引入jquery--%>
    <%--引入css样式--%>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
    <fieldset>
        <legend class="layui-field-title">员工信息</legend>
        <!-- 设置条件查询框 -->
        <div class="row">
            <div class="col-md-5 col-md-offset-2">
                <form class="form-inline" id="conditionalForm">
                    <div class="form-group" style="margin: 0.1em">
                        <label for="InputName" style="margin: 0.3em">员工姓名:</label>
                        <input type="text" class="form-control" id="InputName" placeholder="请输入员工姓名" name="empName">
                    </div>
                    <div class="form-group" style="margin: 0.1em">
                        <label style="margin: 0.3em">部门:</label>
                        <select class="form-control" name="dId" id="dept_query_select">
                            <option value="0">--请选择--</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="col-md-5 ">
                <button type="submit" class="btn btn-primary" id="condition_button">查询</button>
                <button type="submit" class="btn btn-danger" id="condition_reset_button">重置条件/返回</button>
            </div>
        </div>

    </fieldset>
    <%--    按钮--%>
    <div class="row">
        <div class="col-md-9">
            <button class="btn btn-primary btn-sm" id="emp_add_modal_btn">新增</button>
            <button class="btn btn-danger btn-sm" id="emp_delete_all_btn">删除</button>
        </div>
        <%--            分页文字信息--%>
        <div class="col-md-3" id="page_info_area">

        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover table-bordered" id="emps_table">
                <%--e.emp_Id,e.emp_gender,e.emp_email,e.d_Id,e.flag,d.dept_Id, d.dept_Name, d.dept_flag--%>
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check_all"/>
                    </th>
                    <th>id</th>
                    <th>员工姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>部门名称</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

    </div>

    <%--    显示分页信息--%>
    <div class="row">
        <%--            分页条信息--%>
        <div class="col-md-12" id="page_nav_area">

        </div>
    </div>
</div>


<script type="text/javascript">

    var totalRecord,currentPage,currentDept;
    currentDept = 0;
    <%--页面加载完成之后，直接发送一个ajax请求，要到分页数据--%>
    $(function (){
        //跳转到首页
        to_page(1);
    })

    //跳转到指定的页面,发送ajax请求，获取json数据
    function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn=" + pn + "&" + $('#conditionalForm').serialize(),
            type:"GET",
            //result获取到了返回的Msg对象(JSON数据)
            success:function (result){
                //重新显示下拉列表的部门信息
                getDepts2("#conditionalForm select");
                console.log(result);
                //    1、请求成功解析并显示员工信息
                build_emps_table(result);
                //    2、解析并显示分页信息
                build_page_info(result);
                //    3、解析显示分页条数据
                build_page_nav(result);
            }
        })
    }

    /**
     * 发送ajax请求，查询部门信息，以json格式返回
     * 加个请选择在里面，再查出所有的部门信息并显示在下拉列表里
     */
    function  getDepts2(ele){
        //清空之前下拉列表的值
        $(ele).empty();
        var optionEle = $("<option></option>").append("--请选择--").attr("value",0);
        //加入到ele对象中，这里传入的是查询表单对应的id值中select元素：#conditionalForm select
        optionEle.appendTo(ele);
        getDepts_Real(ele);
        $(ele).val(currentDept);
    }

    /*将返回的json字符串传入ele参数中，遍历加入到下拉列表中*/
    function getDepts_Real(ele){
        $.ajax({
            //不加这一条可能会在修改的时候部门信息显示错误
            async:false,
            url:"${APP_PATH}/depts",
            type:"GET",
            success:function (result){
                //显示部门信息在下拉列表中
                $.each(result.extend.depts,function(){
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo(ele);
                })
            }
        })
    }

    //获取返回的json数据（reslut），遍历数据填充到表格中
    function build_emps_table(result){
        //清空页面信息--刷新作用
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps,function (index,item){
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var empGenderTd = $("<td></td>").append(item.empGender == 'M'?"男":"女");
            var empEmailTd = $("<td></td>").append(item.empEmail);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append($("<span></span>")).addClass("glyphicon glyphicon-pencil").append("编辑");
            //为编辑按键添加一个自定义的属性，来表示当前员工的id
            editBtn.attr("edit-id",item.empId);
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            //为删除的按键添加一个自定义的属性，来表示当前员工的id
            delBtn.attr("del-id",item.empId);

            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

            //将以上元素对象加入到表格中
            $("<tr></tr>").append(checkBoxTd)
                .append(empIdTd)
                .append(empNameTd)
                .append(empGenderTd)
                .append(empEmailTd)
                .append(deptNameTd)
                .append(btnTd)
                .appendTo("#emps_table tbody");

        });
    }

    //解析显示分页信息
    function build_page_info(result){
        $("#page_info_area").empty();
        $("#page_info_area").append("当前第 "+ result.extend.pageInfo.pageNum + "页，共"+
            result.extend.pageInfo.pages + " 页，总共 " +
            result.extend.pageInfo.total + " 条记录");

        totalRecord = result.extend.pageInfo.total;
        currentPage = result.extend.pageInfo.pageNum;
    }

    //解析显示分页条
    function build_page_nav(result){
        //清空分页条信息
        $("#page_nav_area").empty();
        //Bootstrap中的写法，导航条中的信息都写在ul变量中
        var ul = $("<ul></ul>").addClass("pagination");

        //首页
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));

        //前一页
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));

        //如果当前遍历的页码是首页(没有前一页)，让首页和上一页不可点击
        if(result.extend.pageInfo.hasPreviousPage == false){
            //disabled是Bootstrap中的写法
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            //为首页和前一页添加点击翻页的事件
            firstPageLi.click(function () {
                to_page(1);
            });
            //为上一页绑定点击事件
            prePageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum - 1);
            });
        }

        //后一页
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));

        //末页
        var lastPageLi = $("<li></li>").append($("<a></a>").append("尾页").attr("href", "#"));

        //如果当前遍历的页码是末页(没有下一页)，让末页和下一页不可点击
        if (result.extend.pageInfo.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            //为下一页和末页添加点击翻页的事件
            nextPageLi.click(function () {
                to_page(result.extend.pageInfo.pageNum + 1);
            });
            lastPageLi.click(function () {
                to_page(result.extend.pageInfo.pages);
            });
        }

        //导航条中添加首页和前一页
        ul.append(firstPageLi).append(prePageLi);

        //遍历1，2，3之类的页码
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {

            //numLi / item表示遍历到的1，2，3之类的页码
            var numLi = $("<li></li>").append($("<a></a>").append(item));

            //如果当前遍历的页码就是当前的页码，让其高亮显示
            if (result.extend.pageInfo.pageNum == item) {
                //active是Bootstrap中的写法
                numLi.addClass("active");
            }

            //单击事件，跳转到对应页面
            numLi.click(function () {
                to_page(item);
            });

            //向导航条中添加1，2，3之类的页码
            ul.append(numLi);
        });

        //导航条中添加下一页和末页
        ul.append(nextPageLi).append(lastPageLi);

        //把ul导航条添加到导航条在页面中的位置
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");

    }



</script>


</body>
</html>